<!--
- Author:  LiShibin.
- Date:    2018/12/10.
- File:    after-sale_check.
-->
<template>
  <div>
    <div class="Topmenu"><i class="iconfont icon-youjiantou" @click="$utils.back()"><a href=""></a></i>
      <h1>查看售后详情</h1>
      <span></span>
    </div>
    <div class="f-oh mt50p">
      <div class="after_sale_check_top">
        <p class="after_sale_check_top_p1" v-show="data.seller_state == '待审核' && time != 0">请等待平台处理</p>
        <p class="after_sale_check_top_p2" v-show="data.seller_state == '待审核' && time != 0">{{time}}
          <!-- 2018年10月23日 &nbsp; 14:32 -->
        </p>
        <p class="after_sale_check_top_p1" v-show="data.seller_state == '待审核' && time == 0">商家未处理</p>
        <p class="after_sale_check_top_p2" v-show="data.seller_state == '待审核' && time == 0">已超时
          <!-- 2018年10月23日 &nbsp; 14:32 -->
        </p>
        <p class="after_sale_check_top_p1" v-show="data.seller_state == '同意'">同意退款</p>
        <p class="after_sale_check_top_p2" v-show="data.seller_state == '同意'">{{data.add_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}
          <!-- 2018年10月23日 &nbsp; 14:32 -->
        </p>
        <p class="after_sale_check_top_p1" v-show="data.seller_state == '不同意'">不同意退款</p>
        <p class="after_sale_check_top_p2" v-show="data.seller_state == '不同意'">{{data.add_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}
          <!-- 2018年10月23日 &nbsp; 14:32 -->
        </p>
        <p></p>
      </div>
      <div class="service_main">
        <ul>
          <li>退款金额 <span class="fr hs">￥{{data.refund_amount}}</span></li>
          <!--
          <li>退款余额 <span class="fr huis">未使用余额支付</span></li> -->
        </ul>
        <p class="service_main_tuikuanshuoming">最多￥ {{data.refund_amount}}，含余额支付{{data.balance_amount}}</p>
        <ul>
          <p class="after_sale_check_shengming">·如果平台超时处理，您可以重新申请售后处理，平台将会第一时 间处理
          </p>
          <p class="after_sale_check_btn">
            <span class="tianxiedingdan fr" @click="openWindow" v-show="data.seller_state == '同意'">填写订单</span>
            <span class="fr" @click="modifyRefund">修改申请</span>
            <span class="fr" @click="cancelReturn" v-show="data.seller_state == '待审核'">撤销申请</span>
          </p>
        </ul>
      </div>
      <div class="after_sale_check_top1 mt043r">
        <p class="after_sale_check_top_tkxx bor_bot">退款信息</p>
        <div class="service_top_img"><img :src="$config.website + '/test.php?sign=' + index + '&image=' + data.goods_image" alt=""></div>
        <div class="service_top_right">
          <p class="service_top_right_1">{{data.goods_name}}</p>
          <p class="service_top_right_2">￥{{data.refund_amount}}<span>x{{data.goods_num}}</span></p>
        </div>
        <div class="c"></div>
        <p class="after_sale_check_top_price b-t">退款金额：{{data.refund_amount}}</p>
        <p class="after_sale_check_top_price">申请时间：{{data.add_time | timestampToDate('yyyy-MM-dd hh:mm:ss')}}</p>
        <p class="after_sale_check_top_price" v-show="data.invoice_no">快递运单：{{data.invoice_no}}</p>
      </div>
    </div>
    <div class="Details_tcbg" v-show="sign == true">
      <div class="after_sale_check_tc">
        <p class="after_sale_check_tc_p1">填写运单</p>
        <input type="text" class="after_sale_check_tc_input" placeholder="请输入运单号" v-model="invoice_no">
        <p class="after_sale_check_tc_btn">
          <span class=" fl" @click="openWindow">取消</span>
          <span class="queding fr" @click="writeTakNumber">确定</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  import {MessageBox} from 'mint-ui'

  export default {
    data() {
      return {
        sign: false,
        order_sn: this.$route.params.order_sn,
        data: [],
        time: '3天',
        interval: '',
        invoice_no: '',
        order_id: this.$route.params.id,
        goods_id: this.$route.params.goods_id
      }
    },
    created() {
      // this.$toast(this.order_sn)
      this.getAfterSaleInfo()
    },
    components: {},
    methods: {
      back() {
        this.$router.go(-1)
      },
      openWindow() {
        if (this.data.invoice_no) {
          this.$toast('运单号已填写完毕')
          return
        }
        this.sign = !this.sign
      },
      getAfterSaleInfo() {
        this.$request.getAfterSaleInfo(this.order_sn).then(data => {
          this.data = data
          if (data.seller_state == '待审核') {
            this.interval = window.setInterval(() => {
              if ((data.refund_endTime - ((new Date()).getTime() / 1000)).toFixed(0) > 0) {
                this.time = this.$utils.timeStamp((data.refund_endTime - ((new Date()).getTime() / 1000)).toFixed(0))
              } else {
                this.time = 0
              }
            }, 1000)
          }
        }).catch(e => {
          this.$toast('请求失败:' + e.msg)
        })
      },
      cancelReturn() {
        MessageBox.confirm('是否确认要撤销此次退款', {cancelButtonText: '取消', confirmButtonText: '确认'}).then(action => {
          this.$request.cancelReturn(this.order_sn, this.data.refund_sn).then(data => {
            this.$toast('撤销成功')
            this.$router.go(-1)
          }).catch(e => {
            this.$toast('撤销失败：' + e.msg)
          })
        })
      },
      writeTakNumber() {
        if (this.invoice_no == '') {
          this.$toast('请输入退款的运单号')
          return
        }
        MessageBox.confirm('运单号是否正确', {cancelButtonText: '取消', confirmButtonText: '确认'}).then(action => {
          this.$request.writeTakNumber(this.order_id, this.goods_id, this.order_sn, this.data.refund_sn, this.invoice_no).then(data => {
            this.$toast('填写成功')
            this.sign = false
            this.getAfterSaleInfo()
          }).catch(e => {
            this.$toast('填写失败：' + e.msg)
          })
        })
      },
      modifyRefund() {
        this.$router.replace({name: 'return-service-refund', params: {id: this.order_id, goods_id: this.goods_id, order_sn: this.order_sn, modify: 1}})
      }
    },
    destroyed() {
      if (this.interval) {
        this.clearInterval(this.interval)
        this.getAfterSaleInfo()
      }
    }
  }
</script>

<style>

</style>
